<template>
  <div>
    <tool-bar nav="" title='ssh'></tool-bar>
    <div class="inline_text">
      <el-input v-model="$data.host">
        <template #prepend>host</template>
      </el-input>
      <el-input v-model="$data.port">
        <template #prepend>port</template>
      </el-input>
      <el-input v-model="$data.user">
        <template #prepend>用户</template>
      </el-input>
      <el-input v-model="$data.password">
        <template #prepend>password</template>
      </el-input>
      <el-button @click="conn_click">连接</el-button>
      <label v-html="$data.id"></label>
      <el-button @click="scp_click">test scp</el-button>
    </div>

    <div style="margin-top:10px;display:flex;">
      <el-input v-model="$data.cmd" style="flex:1;">
        <template #prepend>命令</template>
      </el-input>
      <el-button style="margin-left:10px;" @click="exec_click">执行⤵</el-button>
    </div>
    <div style="margin-top:10px;display: flex;flex-direction: column">
      <div>结果：</div>
      <textarea style="width:100%;min-height:600px;" :value="$data.result"></textarea>
    </div>
  </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
  name: "query-json",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"host": "", "port": 22, user: "root", password: "", cmd: "", result: "", id: ""});


const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const conn_click = function () {
  jv.$http.post("/ssh/open", $data).then(res => {
    $data.id = res.data.data;

    jv.$saveData("data", $data);
  })
};

const scp_click = function () {
  jv.$http.post("/ssh/test-scp?id=" + $data.id).then(res => {
    console.log(res.data.data);
  })
};
const exec_click = function () {
  jv.$http.post("/ssh/exec/" + $data.id, {cmd: $data.cmd}).then(res => {
    $data.result = res.data.data;
  })
};


onMounted(function () {
  jv.$loadData("data", v => v && Object.assign($data, v));
});

</script>

<style lang="scss" scoped>
.inline_text {
  .el-input {
    width: 200px;
    margin-right: 4px;
  }
}

::v-deep(.kv>.k) {
  flex: 1;
}

::v-deep(.kv>.v>:first-child) {
  max-width: unset;
}

.grid {
  position: relative;
  margin-left: 20px !important;
  margin-top: 20px !important;


  ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
    height: 100%;
  }
}

.op_column {
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  align-content: space-around;
  position: relative;
  height: 100%;


  button {
    display: block;
    margin: 10px 6px;
  }

}
</style>